{% extends 'layout/manage.html' %} 
{% load static %} 
{% block css %}
<link rel="stylesheet"  href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}"/>
<style>
  .panel-default {
    margin-top: 10px;
  }

  .panel-default .panel-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .panel-body {
    padding: 0;
  }

  .title-list {
    border-right: 1px solid #dddddd;
    min-height: 500px;
  }

  .title-list ul {
    padding-left: 15px;
  }

  .title-list ul a {
    display: block;
    padding: 5px 0;
  }

  .content {
    border-left: 1px solid #dddddd;
    min-height: 600px;
    margin-left: -1px;
  }
</style>
{% endblock %} 
{% block content %}
<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div><i class="fa fa-book" aria-hidden="true"></i>交接班</div>
      <div class="function">
        <a
          type="button"
          class="btn btn-success btn-xs"
          href="{% url 'wiki_add' project_id=request.tracer.project.id %}"
        >
          <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
        </a>
        {% if wiki_object %}
        <a
          type="button"
          class="btn btn-primary btn-xs"
          href="{% url 'wiki_edit' project_id=request.tracer.project.id wiki_id=wiki_object.id %}"
        >
          <i class="fa fa-edit" aria-hidden="true"></i> 编辑
        </a>
        <a
          type="button"
          class="btn btn-danger btn-xs"
          href="{% url 'wiki_delete' project_id=request.tracer.project.id wiki_id=wiki_object.id %} "
        >
          <i class="fa fa-trash" aria-hidden="true"></i> 删除
        </a>
        {% endif %}
      </div>
    </div>
    <div class="panel-body">
      <div class="col-sm-3 title-list">
        <ul id="catalog"></ul>
      </div>
      <div class="col-sm-9 content">
        {% if wiki_object %}
        <div id="preview_markdown">
          <textarea>{{wiki_object.content}}</textarea>
        </div>
        {%else %}
        <div style="text-align: center; margin-top: 100px">
          <h4>《{{request.tracer.project.name}}》电子交接本</h4>
          
          <a href="{% url 'wiki_output' project_id=request.tracer.project.id %}"><i class="fa fa-plus"></i> 产量统计</a>
          <a href="{% url 'wiki_yield_rate' project_id=request.tracer.project.id %}"><i class="fa fa-cart-plus"></i></i> 良率统计</a>
          <a href="{% url 'wiki_fpy' project_id=request.tracer.project.id %}"><i class="fa fa-edit" ></i> 直通率统计</a>
          <a href="{% url 'wiki_add' project_id=request.tracer.project.id %}"><i class="fa fa-bookmark"></i> 异常交接</a>
        </div>
        {% endif %}
      </div>
      <div></div>
    </div>
  </div>
</div>
{% endblock %} {% block js %}
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>

<script>
  // http://127.0.0.1:8000/manage/4/wiki/detail/
  var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}";
  $(function () {
    initCatalog();
    initPreviewMarkdown();
    initDatePicker();
  });
  /*
    添加对话框：初始化时间选择
    */
  function initDatePicker() {
    $("#id_start_date,#id_end_date").datepicker({
      format: "yyyy-mm-dd",
      startDate: "0",
      language: "zh-CN",
      autoclose: true,
    });
  }
  function initPreviewMarkdown() {
    editormd.markdownToHTML("preview_markdown", {
      htmlDecode: "style,script,iframe",
    });
  }
  function initCatalog() {
    $.ajax({
      url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
      type: "GET",
      dataType: "json",
      success: function (res) {
        if (res.status) {
          $.each(res.data, function (index, item) {
            var href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;
            var li = $("<li>")
              .attr("id", "id_" + item.id)
              .append($("<a>").text(item.title).attr("href", href))
              .append($("<ul>"));
            if (!item.parent_id) {
              //<li><a href="#">目录1</a></li>
              //添加到catalog中
              $("#catalog").append(li);
            } else {
              $("#id_" + item.parent_id)
                .children("ul")
                .append(li);
            }
          });
        } else {
          alert("获取目录失败");
        }
      },
    });
  }
</script>
{% endblock %}
